<template>
  <el-dialog v-if="isDestroy" :close-on-click-modal="false"  :before-close="close" @closed="closed" v-model="view">
    <template  #title>
      <div class="card-header">
        <i
            class="title-icon"
            :class="icon"
        ></i>
        <span class="title-font">{{title}}</span>
      </div>
      <el-divider></el-divider>
    </template>
    <slot   name="body"></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-loading="loading" style="margin-right: 6px" @click="close">取 消</el-button>
        <el-button v-loading="loading" type="primary" v-if="!isView" @click="save">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "dialog-component",
  props:{
    isShow:{
      type: Boolean,
      default: false
    },
    title:{
      type: String,
      default: ''
    },
    loading:{
      type: Boolean,
      default: false
    },
    isView:{
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    }
  },
  data(){
    return{
      view: false,
      isDestroy: true
    }
  },
  watch:{
    isShow:{
        handler(newValue){
          if(newValue){
            this.isDestroy = true
          }
          this.view = newValue

        },
        immediate: true
    }
  },
  emits:["close","save"],
  methods:{
    closed(){
      this.isDestroy = false
    },
    close(){
      this.$emit("close")
    },
    save(){
      this.$emit("save")
    }
  }
}
</script>

<style scoped>

</style>